<include file="public@header"/>
<style>
    .input-no-border {
        border: none;
        padding: 0;
        font-size: 14px;
        background: transparent;
    }

    .checkbox-label-attr {
        width: 200px;
        margin-left: 0 !important;
        margin-right: 10px;
    }

    .spec-row {
        display: none;
    }

    .checkbox-label-attr-color {
        padding-top: 0 !important;
    }

    .checkbox-label-attr-color .checkbox-label-color-attr-option {
        top: 50%;
        margin-top: -6px;
    }

    .checkbox-label-attr-color a {
        display: inline-block;
        vertical-align: middle;
    }

    .checkbox-label-attr-color .attr-name {
        display: inline-block;
        vertical-align: middle;
    }
</style>
<script type="text/html" id="spec-row-tpl">
    <tr>
        <foreach name="attrs" item="vo">
            <td>
                <notempty name="vo.values">
                    <select class="form-control" name="attrs[{$vo.id}]">
                        <option value="">请选择{$vo.name}</option>
                        <foreach name="vo.values" item="value">
                            <option value="{$value.id}">{$value.value}</option>
                        </foreach>
                    </select>
                </notempty>
            </td>
        </foreach>
        <td>
            <input class="form-control input-no-border input-sm" name="price" value="">
        </td>
        <td>
            <input class="form-control input-no-border input-sm" name="original_price" value="">
        </td>
        <td>
            <input class="form-control input-no-border input-sm" name="cost_price" value="">
        </td>
        <td>
            <input class="form-control input-no-border input-sm" name="quantity" value="">
        </td>
        <td>
            <input class="form-control input-no-border input-sm" name="sn" value="">
        </td>
        <td>
            <input class="form-control input-no-border input-sm" name="barcode" value="">
        </td>
        <td>
            <a class="btn btn-sm btn-primary js-spec-row-status">上架</a>
            <a class="btn btn-sm btn-primary js-spec-row-insert">插入</a>
            <a class="btn btn-sm btn-primary js-spec-row-down">下移</a>
            <a class="btn btn-sm btn-success js-spec-row-save">保存</a>
            <a class="btn btn-sm btn-danger js-spec-row-del">删除</a>
        </td>
    </tr>
</script>
</head>
<body>
<div class="wrap">
    <form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('AdminItem/changeModel')}">
        <div class="form-group">
            <label for="js-select-model" class="col-sm-1 control-label">
                <span class="form-required">*</span>商品模型
            </label>
            <div class="col-md-6 col-sm-6">
                <select class="form-control" id="js-select-model" name="model_id">
                    <option value="">请选择模型</option>
                    <foreach name="models" item="vo">
                        <option value="{$vo.id}" {$model_id==$vo.id?'selected':''}>{$vo.name}</option>
                    </foreach>
                </select>
                <p class="help-block">
                    注意：更改商品模型会导致商品规格数据丢失
                </p>
            </div>
            <div class="col-md-1">
                <input type="hidden" name="id" value="{$item.id}"/>
                <button type="submit" class="btn btn-danger js-ajax-submit">确定更换</button>
            </div>
        </div>
    </form>

    <notempty name="attrs">
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <foreach name="attrs" item="vo">
                    <th>{$vo.name}</th>
                </foreach>
                <th><span class="form-required">*</span>价格</th>
                <th><span class="form-required">*</span>原价</th>
                <th><span class="form-required">*</span>成本价</th>
                <th><span class="form-required">*</span>总数量（件）</th>
                <th>商家编码</th>
                <th>商品条形码</th>
                <th width="245">操作</th>
            </tr>
            </thead>
            <tbody>
            <foreach name="sku_list" item="sku">
                <tr data-sku_id="{$sku.id}">
                    <foreach name="attrs" item="vo">
                        <php>
                            $attr_value_id = empty($sku['attr_values'][$vo['id']])?0:$sku['attr_values'][$vo['id']];
                        </php>
                        <td>
                            <notempty name="vo.values">
                                <select class="form-control" name="attrs[{$vo.id}]">
                                    <option value="">请选择{$vo.name}</option>
                                    <foreach name="vo.values" item="value">
                                        <option value="{$value.id}" {$attr_value_id==$value.id?'selected':''}>
                                            {$value.value}
                                        </option>
                                    </foreach>
                                </select>
                            </notempty>
                        </td>
                    </foreach>
                    <td>
                        <input class="form-control input-no-border input-sm" name="price" value="{$sku.price}">
                    </td>
                    <td>
                        <input class="form-control input-no-border input-sm" name="original_price"
                               value="{$sku.original_price}">
                    </td>
                    <td>
                        <input class="form-control input-no-border input-sm" name="cost_price"
                               value="{$sku.cost_price}">
                    </td>
                    <td>
                        <input class="form-control input-no-border input-sm" name="quantity"
                               value="{$sku.quantity|default=0}">
                    </td>
                    <td>
                        <input class="form-control input-no-border input-sm" name="sn" value="{$sku.sn}">
                    </td>
                    <td>
                        <input class="form-control input-no-border input-sm" name="barcode" value="{$sku.barcode}">
                    </td>
                    <td>
                        <empty name="sku.status">
                            <a class="btn btn-sm btn-primary js-spec-row-status" data-status="{$sku.status}">上架</a>
                            <else/>
                            <a class="btn btn-sm btn-danger js-spec-row-status" data-status="{$sku.status}">下架</a>
                        </empty>
                        <a class="btn btn-sm btn-primary js-spec-row-insert">插入</a>
                        <a class="btn btn-sm btn-primary js-spec-row-down">下移</a>
                        <a class="btn btn-sm btn-success js-spec-row-save">保存</a>
                        <a class="btn btn-sm btn-danger js-spec-row-del">删除</a>
                    </td>
                </tr>
            </foreach>
            </tbody>
            <tfoot>
            <tr>
                <php>$attrs_count=count($attrs);</php>
                <td colspan="{$attrs_count+7}" class="text-center">
                    <a href="javascript:;" class="js-spec-row-add">+ 添加</a>
                </td>
            </tr>
            </tfoot>
        </table>
    </notempty>
</div>
<script src="__STATIC__/js/admin.js"></script>
<script type="text/javascript">
    //编辑器路径定义
    var editorURL = GV.WEB_ROOT;
</script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">

    Wind.css('artDialog');
    Wind.use('artDialog');

    var itemId = "{$item.id}";
    $(function () {

        var specRowTpl = $('#spec-row-tpl').html();
        $('body').on('click', '.js-spec-row-insert', function () {
            var $this = $(this);
            var $parentTr = $this.parents('tr');
            $parentTr.before(specRowTpl);
        });

        $('body').on('click', '.js-spec-row-add', function () {
            $(this).parents('table').find('tbody').append(specRowTpl);
        });

        $('body').on('click', '.js-spec-row-status', function () {
            var $this = $(this);
            var $parentTr = $this.parents('tr');

            var skuId = $parentTr.data('sku_id');
            var status = $this.data('status');

            if (!skuId) {
                return;
            }

            $.ajax({
                url: "{:url('AdminItem/skuStatus')}",
                type: 'post',
                dataType: 'JSON',
                data: {id: skuId, status: status ? 0 : 1},
                success: function (data) {
                    if (data.code) {
                        window.location.reload();
                    } else {
                    }
                }
            })
        });

        $('body').on('click', '.js-spec-row-down', function () {
            var $this = $(this);
            var $parentTr = $this.parents('tr');
            var $next = $parentTr.next();

            $next.after($parentTr);
        });

        $('body').on('click', '.js-spec-row-del', function () {
            var $this = $(this);
            var _this = this;
            var $parentTr = $this.parents('tr');
            var skuId = $parentTr.data('sku_id');
            if (skuId) {
                art.dialog({
                    title: false,
                    icon: 'question',
                    content: '确定要删除吗？',
                    follow: _this,
                    close: function () {
                        $this.focus(); //关闭时让触发弹窗的元素获取焦点
                        return true;
                    },
                    okVal: "确定",
                    ok: function () {
                        $.ajax({
                            url: "{:url('AdminItem/deleteSku')}",
                            type: 'post',
                            dataType: 'JSON',
                            data: {id: skuId},
                            success: function (data) {
                                if (data.code) {
                                    $parentTr.remove();
                                    noty({
                                        text: data.msg,
                                        type: 'success',
                                        layout: 'topCenter',
                                        timeout: 800,
                                        callback: {
                                            afterClose: function () {
                                            }
                                        }
                                    });
                                } else {
                                    noty({
                                        text: data.msg,
                                        type: 'error',
                                        layout: 'topCenter',
                                        modal: true,
                                        timeout: 800,
                                        callback: {
                                            afterClose: function () {
                                            }
                                        }
                                    })
                                }
                            }
                        })
                    },
                    cancelVal: '关闭',
                    cancel: true
                });


            } else {
                $parentTr.remove();
            }
        });


        $('body').on('click', '.js-spec-row-save', function () {
            var $this = $(this);
            var $parentTr = $this.parents('tr');

            var skuId = $parentTr.data('sku_id');
            var data = {id: skuId, item_id: itemId};

            $parentTr.find('input,select').each(function () {
                var $_this = $(this);
                data[$_this.attr('name')] = $_this.val();
            });

            $.ajax({
                url: "{:url('AdminItem/saveSku')}",
                type: 'post',
                dataType: 'JSON',
                data: data,
                success: function (data) {
                    if (data.code) {
                        $parentTr.data('sku_id',data.data.id);
                        noty({
                            text: data.msg,
                            type: 'success',
                            layout: 'topCenter',
                            timeout: 800,
                            callback: {
                                afterClose: function () {
                                }
                            }
                        })
                    } else {
                        noty({
                            text: data.msg,
                            type: 'error',
                            layout: 'topCenter',
                            modal: true,
                            timeout: 800,
                            callback: {
                                afterClose: function () {
                                }
                            }
                        })
                    }
                }
            })

        });

    });
</script>
</body>
</html>